<template>
    <view class="bg-[#F8F8F8] min-h-screen font-medium">
        <view class="h-[10rpx]"></view>
        <view @click="navigateTo('/pages/localRegistration/localRegistration')" class="bg-white px-[40rpx] py-[20rpx]  flex justify-between items-center">
            <view>就近报名</view>
            <u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
        </view>
        <view class="mt-[20rpx] bg-white px-[40rpx] py-[30rpx]">
              <view class="text-[38rpx] mb-[20rpx]">分类报名</view>
              <view class="py-[34rpx] ">
                <view class="mb-[30rpx]">感兴趣内容:</view>
                <u-checkbox-group v-model="selectValue" @change="selectChange">
                    <u-checkbox  :customStyle="{ marginBottom: '8px', width: '33%' }" v-for="(item, index) in checkboxList"
                        :key="index" :label="item.name" :name="item.name">
                    </u-checkbox>


                </u-checkbox-group>
            </view>
        </view>
        <view class="mt-[10rpx] px-[40rpx] bg-white text-[34rpx]">
            <view class="text-[38rpx] py-[20rpx] border-b border-[#EFEFEF]">教学点报名</view>
            <view class="py-[30rpx] border-b border-[#EFEFEF] text-center">1、七星社区教学点</view>
            <view class="py-[30rpx] border-b border-[#EFEFEF] text-center">2、东葛路总校教学点</view>
            <view class="py-[30rpx] border-b border-[#EFEFEF] text-center">3、百花岭路社区教学点</view>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
const selectValue = ref([])

const checkboxList = ref([{
    name: "保健"
}, {
    name: "器乐"
}, {
    name: "生活艺术"
}, {
    name: "声乐"
}, {
    name: "书画"
}, {
    name: "体育"
}, {
    name: "舞蹈"
}, {
    name: "信息技术"
}, {
    name: "语言文学"
}, {
    name: "服饰表演"
}, {
    name: "戏剧"
}, {
    name: "公益活动"
}, {
    name: "社区活动"
}, {
    name: "研学活动"
}, {
    name: "趣味活动"
}])

const navigateTo =(url)=>{
  uni.navigateTo({
    url
  })
}
const selectChange = (e) => {
    navigateTo('/pages/classifiedRegistration/classifiedRegistration')
}
</script>